<template>
	<div id="mine">
		<div class="my_top">个人中心</div>
		<!-- 没有登录 -->
		<div class="no_dl" v-if="!isTF">
			<div class="my_denglu">登录</div>
		</div>
		<!-- 已经登录 -->
		<div class="y_dl" v-else>
			<div class="dl_top">
				<div class="head_x"></div>
				<div class="head_xq">
					<p>笑料宝宝</p>
					<p>电话号</p>
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		name:'mine',
		data(){
			return{
				isTF:false,
			}
		},
		created() {
			this.isTF = this.isDenglu.token
		},
		computed:{
			...mapState(['isDenglu'])
		}
	}
</script>

<style scoped lang="less">
	#mine{
		.my_top{
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			text-align: center;
			background-color: #fff;
			line-height: 50px;
		}
		.y_dl{
			background-color: #6bcc37;
			.dl_top{
				display: flex;
				.head_x{
					width: 50px;
					height: 50px;
					border-radius: 50%;
					border: 1px solid #d6d6d6;
				}
				.head_xq{
					flex: 1;
				}
			}
		}
		.no_dl{
			width: 100%;
			height: 565px;
			background: url(../../assets/logo.png) no-repeat;
			background-position: center center; 
			.my_denglu{
				width: 100px;
				height: 100px;
				margin: 20px auto;
				border-radius: 50%;
				border: 1px solid #d6d6d6;
				text-align: center;
				line-height: 100px;
			}
		}
	}
</style>